<template>
	<div class="warp">
		<div class="warp-content">
			<div class="card">
				<div class="card-top">
					<div class="card-top-title flex flexBetween flexC">
						<div class="card-top-title-text">
							<div class="flex flexC">
								<div>
									<span>跟团号:</span
									><span class="cF55726 p-l-10">{{ data.follow_number }}</span>
								</div>
							</div>
							<div class="card-date flex">
								<div>{{ data.create_time }}</div>
							</div>
						</div>
						<div class="status">{{ getStatus(data) }}</div>
					</div>
					<nut-divider style="color: #eeeeee" />
					<div class="card-info">
						<div class="card-info-top flex flexBetween">
							<div class="flex flexC f1">
								<nut-image
									style="width: 40px; height: 40px"
									radius="50"
									class="nutImg"
									showError
									:src="data.organizer_avatar"
								>
									<template #error>
										<nut-image
											style="width: 40px; height: 40px"
											radius="50"
											class="nutImg"
											showError
											src="https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/avatar.png"
										/>
									</template>
								</nut-image>
								<div class="name">{{ data.organizer_nickname }}</div>
							</div>
							<div class="flex flexC">
								<div class="txt ellipsis w140" style="text-align: right">
									{{ data.title }}
								</div>
								<nut-icon name="rect-right" style="color: #999"></nut-icon>
							</div>
						</div>
						<div
							class="content flex flexBetween flexC"
							v-if="data.goods_list && data.goods_list.length > 1"
						>
							<div class="flex flexC flbox">
								<div
									class="img-item"
									v-for="(item, inx) in data.goods_list"
									:key="inx"
								>
									<nut-image
										radius="10"
										class="nutImg"
										showError
										:src="data.url + item.image"
									>
										<template #error>
											<nut-image
												radius="10"
												class="nutImg"
												showError
												src="https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/error.png"
											/>
										</template>
									</nut-image>
									<div class="img-item-title">{{ item.goods_name }}</div>
									<div class="img-item-num">+{{ item.quantity }}件</div>
								</div>
								 
								<!-- <div class="img-item">
									<nut-image
										radius="10"
										class="nutImg"
										src="//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg"
									/>
									<div class="img-item-title">爱媛38号</div>
									<div class="img-item-num">+1件</div>
								</div> -->
							 
							</div>
							<div class="money">
								<div class="money-box">
									<span class="m-icon">¥</span
									><span>{{ data.total_money }}</span>
								</div>
								<div class="info-num">共{{ data.goods_list.length }}件</div>
							</div>
						</div>
					</div>
					<slot></slot>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, onBeforeMount, computed, ref } from 'vue'
const props = defineProps(['item'])
const data = computed(() => {
	return props.item || {}
})
const getStatus = (n: {
	status: string | number
	status_type: number | string
}) => {
	if (n.status == 1) {
		if (n.status_type == 0) {
			return '待发货'
		}
		if (n.status_type == 1) {
			return '已发货'
		}
		if (n.status_type == 2) {
			return '已提货'
		}
		if (n.status_type == 3) {
			return '已收货'
		}
		if (n.status_type == 4) {
			return '待提货 '
		}

		return '已付款'
	}
	if (n.status == 0) {
		return '待支付'
	}
	if (n.status == 1) {
		return '已取消'
	}
	if (n.status == 90) {
		return '待退款'
	}

	if (n.status == 98) {
		return '已取消'
	}
	if (n.status == 99) {
		return '已退款'
	}
	status: 99
	status_type: 0
}
</script>
<style scoped lang="scss">
.warp {
	height: 100%;

	.warp-content {
		.title {
			font-size: 28px;
			color: #000000;
			padding-bottom: 23px;
		}
	}
}

.card {
	background: #fff;
	width: auto;
	margin-bottom: 20px;
	border-radius: 20px;
	padding: 25px 20px;
	.chose {
		width: 36px;
		height: 36px;
		margin-right: 18px;
	}
	.card-top-title-text {
		font-weight: 500;
		font-size: 32px;
	}

	.cF55726 {
		color: #f55726;
	}

	.p-l-10 {
		padding-left: 10px;
	}

	.status {
		color: #26acf5;
		font-size: 28px;
	}

	.card-date {
		color: #999;
		font-size: 22px;
	}
	.card-info {
		.name {
			font-size: 28px;
			color: #000;
			font-weight: 500;
			padding-left: 10px;
		}
		.txt {
			font-size: 28px;
			color: #000;
		}
		.w140 {
			width: 226px;
		}
		.content {
			padding-top: 18px;
			.img-item-title {
				color: #000000;
				font-size: 26px;
				text-align: center;
			}
			.img-item-num {
				color: #999999;
				font-size: 24px;
				text-align: center;
			}
		}
		.info {
			width: 332px;
			font-size: 28px;
			padding-left: 20px;
			.info-title {
				font-weight: 500;
				color: #000000;
			}
			.info-tips {
				font-size: 24px;
				font-weight: 400;
				color: #999999;
			}
		}
		.nutImg {
			display: block;
			width: 120px;
			height: 120px;
			border-radius: 20px;
		}

		.info-num {
			font-size: 22px;
			font-weight: 400;
			color: #999999;
			text-align: right;
		}
		.t-a-c {
			text-align: center;
		}
		.money {
			width:100px;
			font-size: 28px;
			color: #000;
			font-weight: bold;
			text-align: center;
			.m-icon {
				font-size: 20px;
				padding-right: 10px;
			}
		}
		.img-item {
			margin-right: 20px;
		}
	}
	.card-address {
		margin: 20px 0;
		background: #f7f8f9;
		padding: 20px 20px;
		.item-txt {
			color: #000000;
			font-size: 26px;
			font-weight: bold;
			padding-bottom: 5px;
		}
		.item-info {
			font-size: 24px;
			padding: 5px 0;
		}
		.p-l-10 {
			padding-left: 10px;
		}
		.p-r-10 {
			padding-right: 10px;
		}
		.item-txt-icon {
			display: block;
			width: 24px;
			height: 24px;
		}
		.item-txt-icon-p {
			display: block;
			width: 24px;
			height: 28px;
		}
		.edit {
			font-size: 24px;
			color: #999;
			padding: 20px 0;
		}
	}
}
.flbox{
	flex:1;
	overflow-x: auto;
}
</style>
